<template>
  <div>
<el-menu
  :default-active="activeIndex2"
  class="el-menu-demo"
  mode="horizontal"
  @select="selectEvent"
  background-color="#545c64"
  text-color="#fff"
  active-text-color="#ffd04b">
  <el-menu-item index="1">模板操作</el-menu-item>
  <el-submenu index="2">
    <template slot="title">实例操作</template>
    <el-menu-item index="2-1">绘图列表</el-menu-item>
    <el-menu-item index="2-2">实例列表</el-menu-item>
  </el-submenu>
  <el-submenu index="3">
    <template slot="title">绘制</template>
    <el-menu-item index="3-1">模板</el-menu-item>
  </el-submenu>
  <el-submenu index="4">
    <template slot="title">我的信息</template>
    <el-menu-item index="4-1">{{ id }}</el-menu-item>
    <el-menu-item index="4-2">退出登录</el-menu-item>
  </el-submenu>
</el-menu>
</div>
</template>

<script>
  export default {
    data() {
      return {
        activeIndex2: '1',
        id:''
      };
    },
    mounted() {
      this.id=localStorage.id
    },
    methods: {
      selectEvent(key1) {
        if( key1 == '4-2'){
          localStorage.removeItem('login')
          this.$router.push('/login')
        }
        if( key1 == '2-1') this.$router.push('/paint/work')
        if( key1 == '2-2') this.$router.push('/paint/example')
        if( key1 == '3-1') this.$router.push('/paint/mainWork')
        if( key1 == '1') this.$router.push('/paint/mainWork')
      }
    }
  } 
</script>